<template>
  <span class="color-box" v-if="modelValue">
    <span
      class="color-bg"
      :style="'background:' + modelValue"
    />
  </span>
</template>

<script setup>
const modelValue = defineModel();
</script>

<style scoped>
.color-box {
  width: 20px;
  height: 20px;
  padding: 4px;
  border-radius: 4px;
  border: 1px solid #dcdfe6;
  display: block;
  margin: 0 auto;
}
.color-bg {
  width: 100%;
  height: 100%;
  border-radius: 2px;
  display: block;
}
</style>